import React from 'react'
import { View, ScrollView, KeyboardAvoidingView, StyleSheet } from 'react-native'
import { Header } from 'react-native-elements'
import { HeaderBack } from '~/components/header'

import Card from '~/components/card/index'
import Comment from '~/components/comment/index'
import CommentEdit from '~/components/comment/edit'
import TabBar from '~/components/tab/bar'

class Component extends React.Component {
  constructor (props) {
    super(props),

    this.state = {
      post: {},
      comments: [],
    }
  }

  componentDidMount () {
    let {data} = this.props.route.params

    this.setState({
      post: data
    })

    this.getComments({page: 1})
  }

  // 获取评论列表
  getComments ({page = 1}) {
    let mockComments = [
      {
        id: 2,
        comment: '北京小客车指标可在夫妻间变更登记',
        user: {
          id: 112,
          name: '西门吹学',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607495501',
      },
      {
        id: 4,
        comment: '结婚证是假的？谁创造的市场？',
        zan: 112,
        user: {
          id: 1121,
          name: '剑圣1055',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607496501',
      },
      {
        id: 12,
        comment: '对待敌人，攻击是最好的防守',
        user: {
          id: 1121,
          name: '紫棋东来419',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607496901',
      },
      {
        id: 24,
        comment: '对付疯狂的反华分子就应不依不饶，非常好的开始。',
        user: {
          id: 1121,
          name: '用户4962114303552',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607497501',
      },
      {
        id: 124,
        comment: '结婚证是假的？谁创造的市场？',
        user: {
          id: 1121,
          name: '剑圣1055',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607597501',
      },
      {
        id: 124,
        comment: '结婚证是假的？谁创造的市场？',
        user: {
          id: 1121,
          name: '剑圣1055',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607597501',
      },
      {
        id: 124,
        comment: '结婚证是假的？谁创造的市场？',
        user: {
          id: 1121,
          name: '剑圣1055',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607597501',
      },
      {
        id: 124,
        comment: '结婚证是假的？谁创造的市场？',
        user: {
          id: 1121,
          name: '剑圣1055',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607597501',
      },
      {
        id: 124,
        comment: '结婚证是假的？谁创造的市场？',
        user: {
          id: 1121,
          name: '剑圣1055',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607597501',
      },
      {
        id: 124,
        comment: '结婚证是假的？谁创造的市场？',
        user: {
          id: 1121,
          name: '剑圣1055',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607597501',
      },
      {
        id: 124,
        comment: '结婚证是假的？谁创造的市场？',
        user: {
          id: 1121,
          name: '剑圣1055',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607597501',
      },
      {
        id: 124,
        comment: '结婚证是假的？谁创造的市场？',
        user: {
          id: 1121,
          name: '剑圣1055',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607597501',
      },
      {
        id: 124,
        comment: '结婚证是假的？谁创造的市场？',
        user: {
          id: 1121,
          name: '剑圣1055',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607597501',
      },
      {
        id: 124,
        comment: '结婚证是假的？谁创造的市场？',
        user: {
          id: 1121,
          name: '剑圣1055',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607597501',
      },
      {
        id: 124,
        comment: '结婚证是假的？谁创造的市场？',
        user: {
          id: 1121,
          name: '剑圣1055',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607597501',
      },
      {
        id: 124,
        comment: '结婚证是假的？谁创造的市场？',
        user: {
          id: 1121,
          name: '剑圣1055',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607597501',
      },
      {
        id: 124,
        comment: '结婚证是假的？谁创造的市场？',
        user: {
          id: 1121,
          name: '剑圣1055',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607597501',
      },
      {
        id: 124,
        comment: '结婚证是假的？谁创造的市场？',
        user: {
          id: 1121,
          name: '剑圣1055',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607597501',
      },
      {
        id: 124,
        comment: '结婚证是假的？谁创造的市场？',
        user: {
          id: 1121,
          name: '剑圣1055',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607597501',
      },
      {
        id: 124,
        comment: '结婚证是假的？谁创造的市场？',
        user: {
          id: 1121,
          name: '剑圣1055',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607597501',
      },
      {
        id: 124,
        comment: '结婚证是假的？谁创造的市场？',
        user: {
          id: 1121,
          name: '剑圣1055',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607597501',
      },
      {
        id: 128,
        comment: '结婚证是假的？谁创造的市场？',
        user: {
          id: 1122,
          name: '剑圣1155',
          avatar_url: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg'
        },
        ct: '1607597501',
      }
    ]

    this.setState({
      comments: mockComments,
      loaded: true
    })
  }

  render() {
    const { navigation } = this.props
    const { post, comments } = this.state
    console.debug("ad-post:", post)

    if (post == null) {
      return (<View></View>)
    }

    return (
      <View style={{flex: 1}}>
        <Header
          leftComponent={ HeaderBack(navigation) }
          centerComponent={{text: '动态详情', style: {color: 'white'}}}
        />

        <KeyboardAvoidingView style={{flex: 1}} behavior={Platform.OS == "ios" ? "padding" : "height"}>
          <ScrollView style={styles.scrollview} stickyHeaderIndices={[1]} showsVerticalScrollIndicator={false}>
            <Card data={post}></Card>

            <TabBar></TabBar>

            <Comment data={comments}></Comment>
          </ScrollView>

          <CommentEdit></CommentEdit>
        </KeyboardAvoidingView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  scrollview: {
    // flex: 1
  }
})

export default Component;
